<template>
	<view class="homeLayout pageBg">
    <customNavBar title="推荐"></customNavBar>
    <!-- 轮播图 -->
		<view class="banner">
		  <swiper indicator-dots indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" autoplay circular>
		    <swiper-item v-for="item in bannerList" :key="item._id">
		      <image :src="item.picurl" mode="aspectFill"></image>
		    </swiper-item>
		  </swiper>
		</view>
    <view class="notice">
      <view class="left">
        <uni-icons type="sound-filled" size="20"></uni-icons>
        <!-- <uni-icons type="contact" size="30"></uni-icons> -->
        <text class="text">公告</text>
      </view>
      <view class="center">
        <swiper vertical autoplay interval="1500" duration="300" circular>
          <swiper-item v-for="item in noticeList" :key="item._id">
            <navigator url="/pages/notice/detail">{{item.title}}</navigator>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
        <uni-icons type="right" size="16" color="#333"></uni-icons>
      </view>
    </view>
    <!-- 每日推荐 -->
    <view class="select">
      <common-title>
        <template #name>每日推荐</template>
        <template #custom>
          <div class="date">
            <uni-icons type="calendar" size="18"></uni-icons>
            <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
          </div>
        </template>
      </common-title>
      <view class="content">
        <scroll-view scroll-x>
          <view class="box" v-for="item in randomList" :key="item.classid">
              <image @click="goPreview(item._id)" :src="item.smallPicurl" mode="aspectFill"></image>
           
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 专题精选 -->
    <view class="theme">
      <common-title>
        <template #name>
        专题精选
        </template>
        <template #custom>
          <navigator url="" class="more">More+</navigator>
        </template>
      </common-title>
      <view class="content">
          <theme-item  v-for="item in classfiyList" :key="item._id" v-if="classfiyList.length" :item="item"></theme-item>
        <theme-item :isMore="true"></theme-item>
      </view>
    </view>
	</view>
</template>

<script setup>
import {ref} from "vue"
import { apiGetBanner,apiGetRandom,apiGetNotice,apiGetClassfiy } from "@/api/apis.js"
import { onShareAppMessage } from "@dcloudio/uni-app"
// 海报
const bannerList = ref([])
const getBanner = async() =>{
  const res = await apiGetBanner()
  bannerList.value = res.data
}
getBanner()
// 每日推荐 随机
const randomList = ref([])
const getDayRandom = async() =>{
  const res = await apiGetRandom()
  randomList.value = res.data
  // console.log('每日随机',randomList.value);
}
getDayRandom()
// 从每日推荐跳到预览页
const goPreview = (theId) =>{
  uni.setStorageSync('storageClassList',randomList.value)
  uni.navigateTo({
    url:`/pages/preview/preview?id=${theId}`
  })
}

const noticeList = ref([])
const getNotice = async() =>{
  const res = await apiGetNotice({select:true})
  noticeList.value = res.data
}
getNotice()

// 获取分类大图
const classfiyList = ref([])
const getClassify = async () =>{
    let res = await apiGetClassfiy({
      select:true
    })
    // console.log('分类',res);
    classfiyList.value = res.data
}
getClassify()

// 分享
onShareAppMessage((e)=>{
  // console.log(e);
  return {
    title:'咸虾米壁纸',
    path:'/pages/index/index'
  }
})
</script>

<style lang="scss" scoped>
.homeLayout {
  .banner {
    width: 750rpx;
    padding: 30rpx 0;
    swiper {
      width: 750rpx;
      height: 340rpx;
      &-item {
        width: 100%;
        height: 100%;
        padding: 0 30rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
    }
  }
}
.notice {
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f9f9f9;
  margin: 0 auto;
  border-radius: 80rpx;
  display: flex;
  .left {
    width: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    :deep() {
      .uni-icons {
        color: $brand-theme-color !important;
      }
    }
    .uni-icons {
      color: $brand-theme-color !important;
    }
    .text {
      color: $brand-theme-color;
      font-weight: 600;
      font-size: 28rpx;
    }
  }
  .center {
    flex: 1;
    swiper {
      height: 100%;
      &-item {
        height: 100%;
        font-size: 30rpx;
        color: #666;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .right {
    width: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
}
 .select {
    padding-top: 50rpx;
    .date {
      color:$brand-theme-color;
      display: flex;
      align-items: center;
      gap: 5rpx;
      :deep() {
        .uni-icons {
          color: $brand-theme-color !important;
        }
      }
      .uni-icons {
        color: $brand-theme-color !important;
      }
    }
    .content {
      width: 720rpx;
      margin-left: 30rpx;
      margin-top: 30rpx;
      scroll-view {
        white-space: nowrap;
        .box {
          width: 200rpx;
          height: 430rpx;
          display: inline-block;
          margin-right: 15rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
        .box:last-child {margin-right: 30rpx;}
      }
    }
  }
  .theme {
    padding: 50rpx 0;
    .more {
      font-size: 32rpx;
      color: #888;
    }
    .content {
      margin-top: 30rpx;
      padding: 0 30rpx;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 15rpx;
    }
  }
</style>
